<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import { useRoute } from 'vue-router'
const route = useRoute()
// 入参
const emit = defineEmits(['refresh'])
// 生命周期
onMounted(() => {
  //
})
/* 弹框状态 */
const dialogVisible = ref(false)
/*
 * 打开弹框
 */

const treeNodeData = ref()
const openDialog = (node: any) => {
  treeNodeData.value = node
  dialogVisible.value = true
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  dialogVisible.value = false
}
/*
 * 下载目录模板
 */
const downMlmb = () => {
  window.location.href = window.IPCONFIG + '/api/wsjzgl/downMldrmb'
}

const fileRef = ref()
// 点击上传文件
const upload = () => {
  fileRef.value.multiple = false
  fileRef.value.click()
}
const uploadFile = (e: any) => {
  const file = e.target.files[0]
  const formData = new FormData()
  formData.append('ajbh', treeNodeData.value.ajbh)
  formData.append('file', file)
  const params = formData
  wsjzglService
    .importAjml(params, route.query.ajbh as string)
    .then(() => {
      ElMessage({ type: 'success', message: '上传成功' })
      closeDialog()
      emit('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      fileRef.value.value = ''
    })
}

defineExpose({
  openDialog,
})
</script>
<template>
  <!-- 导入目录弹窗 -->
  <el-dialog
    style="margin-top: 260px"
    v-model="dialogVisible"
    title="导入目录"
    width="600px"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <el-link type="primary" @click="downMlmb">下载目录模板</el-link>
    <p class="desc">请下载目录模板，在模板中编辑目录信息后，点击上传完成导入工作</p>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="upload()">上传</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>

    <input style="display: none" type="file" @change="uploadFile" ref="fileRef" />
  </el-dialog>
</template>
<style lang="scss" scoped>
.desc {
  margin-top: 20px;
}
</style>
